<template>
  <div class="trainee-page">
    <a-form class="trainee-page-search" layout="inline" noStyle>
      <a-form-item label="学员姓名">
        <a-input style="width: 160px" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input style="width: 160px" />
      </a-form-item>
      <a-form-item label="账号状态">
        <a-input style="width: 160px" />
      </a-form-item>
      <a-row style="margin-top: 20px; width: 100%">
        <a-col :span="24">
          <a-form-item label="注册时间">
            <a-range-picker style="width: 240px" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px; width: 100%">
        <a-col :span="24" style="padding-left: 70px">
          <a-button type="primary">查询</a-button>
          <a-button style="margin-left: 15px">重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table :columns="columns"> </a-table>
  </div>
</template>
<script lang="ts" setup>
const columns = [
  {
    title: '序号',
  },
  {
    title: '商品ID',
  },
  {
    title: '商品名称',
  },
  {
    title: '商品学时',
  },
  {
    title: '已报名学员（人）',
  },
  {
    title: '操作',
  },
];
</script>

<style lang="scss" scoped>
.trainee-page {
  .trainee-page-search {
    box-sizing: border-box;
    padding: 20px 0 20px 16px;
    background: #fafafa;
    margin-bottom: 25px;
    &.ant-form-inline {
      :deep(.ant-form-item) {
        margin-right: 30px;
      }
    }
  }
}
</style>
